<%--
  Created by IntelliJ IDEA.
  User: 罗蔚
  Date: 2022/4/5
  Time: 11:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>

    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/regist.min.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript">
        //入口函数
        $(function(){
            //按钮的点击时间, 再次校验, 成功后往后台发ajax请求, 添加数据
            $("input[type='submit']").click(function () {
                if(checkUsername() && checkPassword() && checkConfirmPassword() && checkEmail() && checkCode()){
                    //发送ajax
                    //alert("发送ajax");
                    var username = $("input[name='username']").val();
                    var password = $("input[name='password']").val();
                    var email = $("input[name='email']").val();

                    /*var json = "{username:"+username+",password:"+password+",email:"+email+"}";*/
                    var json = {"username":username,"password":password,"email":email};
                    $.ajax({
                        type: "post",
                        url: "${pageContext.request.contextPath}/registConreoller/addUser",
                        contentType: "application/json",
                        data: JSON.stringify(json),
                        dataType: "json",
                        async:"false",
                        success: function (data) {
                            if(data.code == 200){
                                location.href = "${pageContext.request.contextPath}/pages/regist_ok.jsp";
                            }else {
                                alert("注册失败, 请重新注册")
                            }
                        }
                    })
                }else{
                    alert("请填写完注册信息");
                }
            })
        })

        //校验用户名
        function checkUsername(){
            /* //获取用户名
            var username = $("#setusername").val();
                console.log(username); */

            //判断是否为空
            if(existUsername()){
                /* $(".td1").html("<span color='red'>用户名填写完成</span>") */
                return true;
            }else{
                //$(".td1").html("<font color='red'>用户名不能为空</font>");
                return false;

            }
        }

        //判断用户名是否已经被注册过, 正则表达式验证
        function existUsername(){
            var flag = true;

            //获取用户名
            var username = $("#setusername").val();
            //是否为空
            if(username){
                //正则表达式
                var reg = new RegExp("^[\\u4e00-\\u9fa5_a-zA-Z0-9_]{2,10}$");
                var regFlag = reg.test(username);
                if(regFlag){
                    //符合正则, 再比对是否存在
                    //发送ajax, 判断是否已存在

                    $.ajax({
                        type:"post",
                        url:"${pageContext.request.contextPath}/registConreoller/existUsername",
                        contentType:"application/json",
                        data:JSON.stringify({"username":username}),
                        dataType:"json",
                        async:"false",
                        success:function(data){
                            if(data.code == 200){
                                //可用
                                $(".td1").html("<font color='green'>用户名可用</font>");
                                flag = true;
                                return flag;
                            }else{
                                $(".td1").html("<font color='red'>用户名已重复</font>");
                            }
                        }
                    })

                }else{
                    //不符合正则
                    $(".td1").html("<font color='red'>请填写用户名，格式为2-10个字符，可以为数字，下划线和中英文</font>");
                }
            }else{
                $(".td1").html("<font color='red'>用户名不能为空</font>");
            }
            return flag;

        }

        //校验密码
        function checkPassword(){
            var setpassword = $("#setpassword").val();
            //console.log(setpassword);
            //判断是否为空
            if(setpassword){
                //密码不为空, 进行正则校验
                var reg = new RegExp("^[_a-zA-Z0-9_]{6,16}$");
                var regFlag = reg.test(setpassword);
                if(regFlag){
                    //符合正则, 再比对是否存在
                    $(".td2").html("<font color='green'>密码填写完成</font>")
                    return true;
                }else{
                    //不符合正则
                    $(".td2").html("<font color='red'>请填写登录密码，格式为6-16个字符，可以为数字，下划线和英文</font>");
                    return false;
                }
            }else{
                //密码为空
                $(".td2").html("<font color='red'>密码不能为空</font>");
                return false;
            }
        }

        //校验确认的密码
        function checkConfirmPassword(){
            var setpassword = $("#setpassword").val();
            var setconfirmpassword = $("#confirmpassword").val();

            if(setpassword == setconfirmpassword){
                $(".td3").html("<font color='green'>密码确认完成</font>")
                return true;
            }else{
                $(".td3").html("<font color='red'>请输入与设置相同的密码</font>")
            }
        }

        //校验邮箱
        function checkEmail(){
            var email = $("#email").val();
            //console.log(setpassword);
            //判断是否为空
            if(email){
                //密码不为空, 进行正则校验
                var reg = new RegExp("^[A-Za-z0-9\\u4e00-\\u9fa5]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");
                var regFlag = reg.test(email);
                if(regFlag){
                    //符合正则, 再比对是否存在
                    $(".td4").html("<font color='green'>邮箱填写完成</font>")
                    return true;
                }else{
                    //不符合正则
                    $(".td4").html("<font color='red'>请填写正确的邮箱格式</font>");
                }
            }else{
                //密码为空
                $(".td4").html("<font color='red'>电子邮箱不能为空</font>");
                return false;
            }
        }

        //校验验证码
        function checkCode(){
            var code = $("#code").val();
            var flag = false;
            /* console.log("${checkCode}");
    		console.log(code); */
            //alert("检查验证码")
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/checkCodeController/code",
                contentType:"application/json",
                data:JSON.stringify({"code":code}),
                async:false,
                dataType:"json",
                success:function(data){
                    //console.log(data.code);
                    if(data.code == 200){
                        $(".codefont").html("输入正确");
                        $(".codefont").css("color", "green");
                        flag =  true;
                    }else{
                        $(".codefont").html("验证码输入错误, 请重新输入");
                        $(".codefont").css("color", "red");
                        flag = false;
                    }
                }
            })
            //console.log(flag);
            return flag;

        }

    </script>
</head>

<body id="body">
<div id="to-top" class="back-to-top-hidden"><a href="#top" class="fa fa-angle-up"></a></div>
<header>
    <div id="top" class="inner-bg">
        <div class="inner">
            <div class="inner-left">
                点击跳转<a href="${pageContext.request.contextPath}/pages/">首页</a>
            </div>
            <!-- <div class="inner-right">
                <ul>
                    <li><a href="#">请登录</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">我的订单</a></li>
                </ul>
            </div> -->
        </div>
    </div>
    <div class="head">
        <a href="${pageContext.request.contextPath}/pages/"><img src="../img/logo.png" alt=""></a>
    </div>
</header>
<div class="banner">
    <div class="head">注册账号</div>
    <div class="content">
        <%--<form action="${pageContext.request.contextPath}/user/regist" method="post" onsubmit="return check()">--%>
            <table>
                <tr>
                    <td>
                        <label for="setusername">用户名：</label>
                    </td>
                    <td>
                        <input type="text" id="setusername" class="setusername" name="username"  onblur="existUsername()">
                    </td>
                    <td class="td1">请设置用户名，格式为2-10个字符，可以为数字，下划线和中英文</td>
                </tr>
                <tr>
                    <td>
                        <label for="setpassword">设置密码：</label>
                    </td>
                    <td>
                        <input type="password" id="setpassword" class="setpassword" name="password" onblur="checkPassword()">
                    </td>
                    <td class="td2">请设置登录密码，格式为6-16个字符，可以为数字，下划线和英文</td>
                </tr>
                <tr>
                    <td>
                        <label for="confirmpassword">确认密码：</label>
                    </td>
                    <td>
                        <input type="password" id="confirmpassword" class="confirmpassword" name="confirmpassword" onblur="checkConfirmPassword()">
                    </td>
                    <td class="td3">再次输入设置的密码</td>
                </tr>
                <tr>
                    <td>
                        <label for="email">电子邮箱：</label>
                    </td>
                    <td>
                        <input type="email" id="email" class="email" name="email" onblur="checkEmail()">
                    </td>
                    <td class="td4">请填写正确的邮箱，该邮箱用于激活账号</td>
                </tr>
                <tr>
                    <td>
                        <label for="code">验证码：</label>
                    </td>
                    <td colspan="2">
                        <input type="text" id="code" class="code" onblur="checkCode()">
                        <font class="codefont">填写下面图片所示字符</font>
                    </td>
                    <td></td>
                </tr>
            </table>
            <div class="codeimg">
                <img src="${pageContext.request.contextPath}/checkCodeController/doCheckCode" id="checkcode">&nbsp;看不清？点击<a onclick="flush()" id="a_code">换一张</a>
            </div>
            <input type="submit" value="同意以下条款，提交">
            <span>已有账号，去<a href="${pageContext.request.contextPath}/pages/login.jsp">登录</a></span><br>
        <%--</form>--%>

        <textarea name="" id="" cols="120" rows="5" readonly>        随机一段废话因何而发生?随机一段废话似乎是一种巧合，但如果我们从一个更大的角度看待问题，这似乎是一种不可避免的事实. 而这些并不是完全重要, 更加重要的问题是, 生活中, 若随机一段废话出现了, 我们就不得不考虑它出现了的事实. 要想清楚, 随机一段废话, 到底是一种怎么样的存在. 那么, 对我个人而言，随机一段废话不仅仅是一个重大的事件，还可能会改变我的人生. 问题的关键究竟为何? 随机一段废话因何而发生?现在, 解决随机一段废话的问题, 是非常非常重要的. 所以, 这种事实对本人来说意义重大, 相信对这个世界也是有一定意义的.在这种困难的抉择下, 本人思来想去, 寝食难安.从这个角度来看, 总结的来说,
                在这种困难的抉择下, 本人思来想去, 寝食难安.我们不妨可以这样来想: 对我个人而言，随机一段废话不仅仅是一个重大的事件，还可能会改变我的人生. 每个人都不得不面对这些问题. 在面对这种问题时, 现在, 解决随机一段废话的问题, 是非常非常重要的. 所以, 随机一段废话, 到底应该如何实现. 既然如此, 既然如此, 可是，即使是这样，随机一段废话的出现仍然代表了一定的意义. 我认为, 生活中, 若随机一段废话出现了, 我们就不得不考虑它出现了的事实.
                了解清楚随机一段废话到底是一种怎么样的存在, 是解决一切问题的关键.要想清楚, 随机一段废话, 到底是一种怎么样的存在. 要想清楚, 随机一段废话, 到底是一种怎么样的存在. 可是，即使是这样，随机一段废话的出现仍然代表了一定的意义.
                我们一般认为, 抓住了问题的关键, 其他一切则会迎刃而解.而这些并不是完全重要, 更加重要的问题是, 随机一段废话因何而发生?这样看来, 要想清楚, 随机一段废话, 到底是一种怎么样的存在. 那么, 既然如何, 现在, 解决随机一段废话的问题, 是非常非常重要的. 所以, 随机一段废话似乎是一种巧合，但如果我们从一个更大的角度看待问题，这似乎是一种不可避免的事实. 而这些并不是完全重要, 更加重要的问题是, 本人也是经过了深思熟虑,在每个日日夜夜思考这个问题. 我们不得不面对一个非常尴尬的事实, 那就是, 我们都知道, 只要有意义, 那么就必须慎重考虑.随机一段废话似乎是一种巧合，但如果我们从一个更大的角度看待问题，这似乎是一种不可避免的事实. 莫扎特在不经意间这样说过, 谁和我一样用功，谁就会和我一样成功。这句话看似简单，但其中的阴郁不禁让人深思。</textarea>
    </div>
</div>

<footer>
    <div class="footer-inner">
        <div class="module">
            <div class="module-head">购物指南</div>
            <ul>
                <li><a href="#">订单状态</a></li>
                <li><a href="#">订单状态</a></li>
            </ul>
        </div>
        <div class="module">
            <div class="module-head">支付帮助</div>
            <ul>
                <li><a href="#">支付帮助</a></li>
                <li><a href="#">在线支付</a></li>
                <li><a href="#">货到付款</a></li>
            </ul>
        </div>
        <div class="module">
            <div class="module-head">配送帮助</div>
            <ul>
                <li><a href="#">EMS/邮政普包</a></li>
                <li><a href="#">商品验货与签收</a></li>
                <li><a href="#">配送范围及运费</a></li>
            </ul>
        </div>
        <div class="module">
            <div class="module-head">售后服务</div>
            <ul>
                <li><a href="#">售后服务</a></li>
                <li><a href="#">发票制度</a></li>
                <li><a href="#">退货说明</a></li>
                <li><a href="#">换货说明</a></li>
            </ul>
        </div>
        <div class="module">
            <div class="module-head">帮助信息</div>
            <ul>
                <li><a href="#">友情链接</a></li>
                <li><a href="#">联系客服</a></li>
                <li><a href="#">找回密码</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </div>
    </div>
    <div class="footer-list">
        <ul>
            <li><a href="#">关于我们</a></li>
            <li>
                <div></div>
            </li>
            <li><a href="#">常见问题</a></li>
            <li>
                <div></div>
            </li>
            <li><a href="#">安全交易</a></li>
            <li>
                <div></div>
            </li>
            <li><a href="#">购买流程</a></li>
            <li>
                <div></div>
            </li>
            <li><a href="#">如何付款</a></li>
            <li>
                <div></div>
            </li>
            <li><a href="#">联系我们</a></li>
            <li>
                <div></div>
            </li>
            <li><a href="#">合作提案</a></li>
        </ul>
        <div class="last">Copyright @ 2015-2021 蜀ICP备01000010号</div>
    </div>
</footer>
</body>
<script>
    function flush(){
        $.post("${pageContext.request.contextPath}/checkCodeController/doCheckCode","",function(data){
            $("#checkcode").attr("src", "${pageContext.request.contextPath}/checkCodeController/doCheckCode");
        })
    }
</script>
<style>
    #a_code:hover{
        cursor:pointer;
    }
</style>
</html>